<template>
  <div class="pro">
    <!-- 导出按钮 -->
    <el-button @click="exportdataFn">导出数据</el-button>
    <!-- 表格数据 -->
    <el-table :data="prolistdata" style="width: 100%">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <span style="margin-left: 10px">{{
              (currentPage - 1) * pageSize + scope.$index + 1
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <el-image
              :src="scope.row.img1"
              :preview-src-list="[scope.row.img1, scope.row.img2, scope.row.img3, scope.row.img4]"
              :alt="scope.row.alt"
              :z-index="100"
              preview-teleported
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="proname" align="center"> </el-table-column>
      <el-table-column label="品牌" prop="brand" align="center"> </el-table-column>
      <el-table-column label="分类" prop="category" align="center"> </el-table-column>
      <el-table-column label="原价" :sortable="true" prop="originprice" align="center">
      </el-table-column>
      <el-table-column label="折扣" sortable prop="discount" align="center"> </el-table-column>
      <el-table-column label="销量" sortable prop="sales" align="center"> </el-table-column>
      <el-table-column label="是否秒杀" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isseckill"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否售卖" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.issale"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isrecommend"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      v-model:page-size="pageSize"
      background
      layout="prev, pager, next"
      :total="total"
      v-model:current-page="currentPage"
      :default-page-size="1"
    />
  </div>
</template>

<script>
// 导入接口
import { getprolist } from '@/utils/product'

// 导入包
import ExportJsonExcel from 'js-export-excel'

export default {
  name: '',
  data() {
    return {
      prolistdata: [], // 当前页的产品列表
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页条数
      total: 0 // 总的数据条数
    }
  },
  watch: {
    currentPage: {
      handler(newvalue) {
        console.log('newvalue', newvalue)
        // 根据页数的变化, 重新请求数据
        this.getprolistFn()
      }
    }
  },
  created() {
    // 初始化请求列表数据
    this.getprolistFn()
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row)
    },
    // 定义请求产品列表数据
    getprolistFn() {
      getprolist({
        count: this.currentPage,
        limitNum: this.pageSize
      }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.prolistdata = res.data.data
          this.total = res.data.total
        }
      })
    },
    // 数据导出
    exportdataFn() {
      // 书写数据的逻辑(注意: 现在我们做的是纯前端数据导出,公司很多都是后端做的数据导出)
      // 给你个连接,你讲链接赋值给a标签的href 属性就行了 <a href='文件路径后端给的'>数据导出</a>
      // 使用第三方库实现数据纯前端导出
      // 01: 下载第三方包 npm install js-export-excel
      // 02: 先引入下载好的包 import ExportJsonExcel from 'js-export-excel'
      // 03: 设置导出的表格的格式和导出的数据字段
      var options = {
        fileName: '产品数据', // 导出的文件的名字(给导出的文件命名)
        datas: [
          {
            sheetData: this.prolistdata, // 要导出的数据数组
            sheetName: '第一页数据', // 图表的标签页名称
            sheetFilter: ['proname', 'brand', 'category', 'originprice'], // 图标中包含哪些数据字段
            sheetHeader: ['产品名称', '品牌', '分类', '原价'], // 表头名称
            columnWidths: [20, 20] // 列宽
          }
        ]
      }
      // 创建excel 实例对象, 并传递要导出的数据的配置项
      var toExcel = new ExportJsonExcel(options) //new
      toExcel.saveExcel() //保存 excel
    }
  }
}
</script>
<style scoped>
::v-deep .cell {
  height: 70px !important;
  overflow: hidden;
}
</style>